<template>
	<el-main>
		<el-row>
			<el-col :md="10">
				<div class="tips-default-box" v-html="tipsTitle"></div>
				<div style="margin-top: 24px;">
					<el-button @click="openDialog">开始验证</el-button>
					<el-dialog
						title="滑动验证"
						:visible.sync="dialogVisible" 
						:close-on-click-modal="false"
						:close-on-press-escape="false"
						:show-close="false"
						width="360px" 
						center>
						<slide-verify
							:l="42"
							:r="10"
							:w="310"
							:h="155"
							ref="slideblock"
							slider-text="向右滑动"
							@success="onSuccess"
							@fail="onFail"
							@refresh="onRefresh">
						</slide-verify>
					</el-dialog>
				</div>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	export default {
		name: "Verify",
		data() {
			return {
				tipsTitle: '本示例使用插件：vue-monoplasty-slide-verify <a href="https://gitee.com/monoplasty/vue-monoplasty-slide-verify" target="_blank">插件地址</a>',
				imgs: [''], //背景图片数组，可不传，为空时会使用第三方API图片路径，可能加载缓慢
				dialogVisible: false
			}
		},
		methods: {
			// 打开验证框
			openDialog() {
				this.dialogVisible = true;
			},
			// 验证成功
			onSuccess(times) {
				let _this = this;
				_this.$message({
					message: '恭喜你，'+ Math.round(times/1000) +'秒内验证成功。',
					type: 'success',
					onClose: function(res) {
						_this.dialogVisible = false;
						// 重置图案
						_this.$refs.slideblock.reset();
					}
				});
			},
			// 验证失败
			onFail() {
				console.log('验证不通过');
			},
			// 刷新
			onRefresh(){
				console.log('点击了刷新小图标');
			}
		}
	}
</script>
